<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程热度排行</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/census/courseRanking.css">
</head>
<body>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-card headerCenter">
                <div class="layui-card-header">
                    课程热度排行
                    <div class="fr" style="margin-bottom: 10px">
                        <button onclick="refresh()" type="button" class="layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-refresh-1"></i>
                            刷新
                        </button>
                        <button onclick="goBack()" type="button" class="layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-return"></i>
                            返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 btn">
            <button onclick="search('like_num')" type="button" class="layui-btn">
                <i class="layui-icon layui-icon-praise"></i>
                点赞数量排行
            </button>
            <button onclick="search('share_num')" type="button" class="layui-btn" style="margin: 0 80px">
                <i class="layui-icon layui-icon-star"></i>
                分享数量排行
            </button>
            <button onclick="search('collect_num')" type="button" class="layui-btn">
                <i class="layui-icon layui-icon-read"></i>
                收藏数量排行
            </button>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backWhite" style=" font-size: 16px; height: 40px; font-weight: bold;">
                    <i class="layui-icon layui-icon-group"></i>
                    课程热度统计
                </div>
                <table id="content" cellspacing="0" cellpadding="0">

                </table>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backWhite" style=" font-size: 16px; height: 40px; font-weight: bold;">
                    <i class="layui-icon layui-icon-chart-screen"></i>
                    课程热度统计
                </div>
            </div>
            <div class="fr" id="linear"></div>
        </div>
    </div>
</body>
<!--<script src="/js/census/courseRanking.js"></script>-->
<script src="/echarts/echarts.js"></script>
<script>
    var $,
        layer,
        form,
        upload,
        table;
    var flag = false, courseArr = [];

    layui.use(['jquery', 'layer', 'table', 'form', 'upload'], function () {
        $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload,
            table = layui.table;

    });

    getCourseRankingData("like_num");
    function getCourseRankingData(field){
        var firstTd = null;
        if (field == 'like_num'){
            firstTd = '点赞数量';
        } else  if (field == 'share_num'){
            firstTd = '分享数量';
        }else  if (field == 'collect_num'){
            firstTd = '收藏数量';
        }
        $.ajax({
            url:'/CourseRanking/getCountCourse',
            type: 'post',
            dataType:'json',
            data: {'field': field},
            async: false,
            success:function (data) {
                courseArr = data.data;
                getCourseRankingZTree(data.data);
            }
        });
        if (courseArr != null && courseArr.length > 0){
            var trhead = $('<tr></tr>');
            var tdhead = [courseArr.length - 1];
            var trbody = $('<tr></tr>');
            var tdbody= [courseArr.length - 1];
            $(courseArr).each(function (index, ele) {
                tdhead[index] = $('<td class="tdhead">'+ele.name+'</td>');
                tdbody[index] = $('<td class="tdbody">'+ele.sum+'</td>');
            })
            if (flag){
                $(trhead).html('');
                $(trbody).html('');
                $(trhead).html(tdhead);
                $(trbody).html(tdbody);
                $(trhead).prepend($('<td class="tdhead">课程类型</td>'));
                $(trbody).prepend($('<td class="tdbody">'+firstTd+'</td>'));
            } else{
                $(trhead).html(tdhead);
                $(trbody).html(tdbody);
                $(trhead).prepend($('<td class="tdhead">课程类型</td>'));
                $(trbody).prepend($('<td class="tdbody">'+firstTd+'</td>'));
                flag = true;
            }
            $('#content').html('');
            $('#content').append(trhead).append(trbody);
        }
    }

    //展示ztree
    function getCourseRankingZTree(data) {
        //将查到的数据遍历成数组
        var courseName = [data.length - 1], courseNum = [data.length - 1]
        data.forEach(function (ele, i) {
            courseName[i] = ele.name;
            courseNum[i] = ele.sum;
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('linear'));

        // 指定图表的配置项和数据
        var option = {
            legend: {
                data: ['课程量'],
                bottom: 10
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: {
                type: 'category',
                data: courseName
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    data: courseNum,
                    // 点的颜色。
                    itemStyle: {color: '#D53A35'},
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        setTimeout(function (){
            window.onresize = function () {
                myChart.resize();
            }
        },200);
    }

    //搜索
    function search(field) {
        getCourseRankingData(field);
    }

</script>
</html>